<template>
  <div class="codeStake">
    <div class="mainView-dialog">
      <div class="iconfont logoicon icon-icon-test-copy-copy dialog-logo"></div>
      <p style="padding-top: 30px;">{{$t('ndxStake.pleaseCode')}}</p>
      <!-- 钱包登录二维码 -->
      <div class="walletCode">
        <div class="codebox">
          <canvas id="codeStake"></canvas>
          <img class="logocode" :src="handleGetWalletLogo()">
        </div>
      </div>
      <div class="gray">{{$t('wallet.eosname')}}</div>
      <div class="accountName">{{order.account}}</div>
      <div class="tipOut flexc">
        <div class="tip">
          {{$t('ndxStake.ifError')}}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { accMul, QRcodeCode } from '@/utils/validate'; // eslint-disable-line
import { walletsLogo } from '@/utils/wallet';

export default {
  name: 'codeStake', // 钱包抵押下单扫码弹窗
  data() {
    return {
      loadingCode: true,
      order: {
        account: null,
      }
    }
  },
  components: {
  },
  props: {
    MortgageStatus: {
      type: Number,
      default: 0
    },
  },
  watch: {
    MortgageStatus: function change() {
      this.handleGetPayCode();
    },
  },
  created() {
  },
  mounted() {
    const scatterApp = this.$store.state.app.scatter;
    if (scatterApp && scatterApp.identity) {
      this.order.account = scatterApp.identity.accounts[0].name;
    }
    this.handleGetPayCode();
  },
  methods: {
    handleGetPayCode() { // 二维码生成
      const canvas = document.getElementById('codeStake');
      const scat = this.$store.state.app.scatter;
      const channel = scat.wallet.toLowerCase();
      // const params = `http://192.168.8.253:8890/more?channel=${wallet}&stake=${this.MortgageStatus}`;
      const params = `https://newdex.340wan.com/more?channel=${channel}&stake=${this.MortgageStatus}`;
      QRcodeCode(params, canvas, 240, (err) => {
        if (err) {
          this.$message.error(this.$t('jy.codeError'));
        }
      })
    },

    // 获取钱包的logo
    handleGetWalletLogo() {
      return walletsLogo();
    },
  },
}
</script>

<style scoped lang="scss">
$-clolor: #13A0F9;
// dialog 样式
.dialogPay{
  /deep/ .el-dialog{
    background: url('../../../../assets/img/wallet/bg-financial.png') no-repeat;
    color: white;
    position: relative;

    .el-icon-close{
      color: white;
    }

    .dialog-logo{
      position: absolute;
      font-size: 30px;
      left: 30px;
      top: 20px;
    }
  }

  /deep/ .el-dialog__body{
    padding: 0px;
  }
}

$-clolor: #13A0F9;
.colorThis {
  color: $-clolor !important;
}
// dialog 样式
.mainView-dialog{
  color: white;
  text-align: center;
  padding-top: 20px;

  .gray {
    margin-top: 5px;
    opacity: 0.8;
    font-size: 12px;
  }

  .accountName{
    padding-top: 5px;
    font-size: 16px;
  }

  .btnDiv{
    margin: 22px 0px;
  }

  .tipOut{
    margin-top: 20px;
    // height: 100px;
    background: #fff;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;

    .tip{
      padding: 10px 0px 20px;
      width: 530px;
      margin: auto;
      color: #999;
    }
  }
}
.walletCode {
  padding: 10px 0 10px;

  .codebox {
    position: relative;
    width: 240px;
    height: 240px;
    margin: auto;

    .canvasbox {
      width: 100%;
    }

    .logocode {
      padding: 2px;
      position: absolute;
      width: 26px;
      height: 26px;
      left: 50%;
      top: 50%;
      border-radius: 5px;
      background: #fff;
      transform:translate3D(-50%, -50%, 0);
    }

    .overdueCode {
      background: rgba(255, 255, 255, .9);
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;

      span {
        min-width: 100%;
      }

      a {
        display: block;
      }
    }
  }

  p {
    color: #999;
    padding: 10px 0;
  }

  a {
    color: $-clolor
  }
}

</style>
